'use strict';
import React, { Component } from 'react';
import { observer, Provider, inject } from 'mobx-react';
import { Radio, Button, Input, Collapse } from 'antd';
import cloneDeep from 'lodash/cloneDeep';
import QRCode from 'qrcode.react';
import { sendAction, sendActionAndWait } from './store';
import { net as netAPI } from './protocolConst.json';
const Panel = Collapse.Panel;
const RadioGroup = Radio.Group;

@inject('store')
@observer
export default class TestAccount extends Component {
	constructor(props) {
		super(props);
		this.state = {
			sendTargetId: null,
		};
	}

	componentDidMount() {}

	componentDidUpdate() {}

	componentWillUnmount() {}

	render() {
		let index = parseInt(this.props.index);
		let info = this.props.store.accounts[index];
		// console.log('key', index, info.qrCode);
		return (
			<div
				style={{
					margin: 1,
					border: '1px solid grey',
					width: 320,
					wordBreak: 'break-all',
					// flex: 1,
					// flexDirection: 'column',
				}}
			>
				{this.renderId()}
				{info.err && info.err + ': 清除id重新登录'}
				{info.qrCode && this.renderQRCode(info)}
				<br />
				{info.name && this.renderAccount(info)}
			</div>
		);
	}

	renderId() {
		let index = parseInt(this.props.index);
		let info = this.props.store.accounts[index];
		return (
			<div>
				{info.options && <span style={{ color: 'red' }}>(p)</span>}
				{info.id || `empty-${index}`}
				<br />
				<Button
					onClick={() => {
						console.log('clear', index);
						this.props.store.clearAccount(index);
					}}
				>
					清
				</Button>
				<Button
					onClick={() => {
						console.log('close', index);
						this.props.store.closeAccount(index);
					}}
				>
					关
				</Button>
				<Button
					onClick={() => {
						let account = this.props.store.accounts[index];
						account.isLogining = false;
					}}
				>
					刷
				</Button>
				<Button
					onClick={() => {
						let account = this.props.store.accounts[index];
						sendAction(netAPI.getAgent, {
							id: account.id,
						});
					}}
				>
					查
				</Button>
				<Button
					onClick={() => {
						this.props.store.sendControlCommand(index, '3');
					}}
				>
					控
				</Button>
			</div>
		);
	}

	renderAccount(info) {
		let { store } = this.props;
		let index = parseInt(this.props.index);
		return (
			<div style={{ margin: 5 }}>
				{info.name && '账号:' + info.name}
				<br />
				<img src={'data:image;base64,' + info.avatar} width={100} />
				<Input
					onChange={e => {
						this.setState({ input: e.target.value });
					}}
				/>
				<Button
					onClick={() => {
						this.props.store.sendMessage(
							index,
							this.state.sendTargetId,
							this.state.input
						);
					}}
				>
					发送
				</Button>
				<Collapse accordion>
					<Panel
						header={
							<div>
								好友 &nbsp;
								<Button
									style={{ height: 22 }}
									onClick={e => {
										store.refreshRooms(store.getAccount(index));
										e.stopPropagation();
									}}
								>
									刷新
								</Button>
							</div>
						}
						key="1"
					>
						<p>...</p>
					</Panel>
					<Panel
						header={
							<div>
								群 &nbsp;
								<Button
									style={{ height: 22 }}
									onClick={e => {
										store.refreshRooms(store.getAccount(index));
										e.stopPropagation();
									}}
								>
									刷新
								</Button>
							</div>
						}
						key="2"
					>
						<RadioGroup
							onChange={e => {
								console.log('change', e.target.value);
								this.setState({
									sendTargetId: e.target.value,
								});
							}}
						>
							{info.rooms &&
								info.rooms.map((v, k) => {
									return (
										<div key={k}>
											<Radio value={v.id}>
												{v.name}/{v.id}
											</Radio>
										</div>
									);
								})}
						</RadioGroup>
					</Panel>
				</Collapse>
			</div>
		);
	}
	renderQRCode(info) {
		return (
			<div>
				<QRCode value={info.qrCode} />
				<div> {info.qrCode} </div>
			</div>
		);
	}
}
